<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from "vue";
	import {
		changePasswordApi,
		registerApi,
		sendCodeApi,
		getShengApi,
		getShiApi,
		getClassApi,
	} from "/api/request";
	import {
		onShow,
		onLoad,
		onHide
	} from "@dcloudio/uni-app";
	onHide(() => {
		if (timer) {
			clearTimeout(timer)
		}
	})
	const getSheng = async () => {
		let res = await getShengApi();
		sheng.value = res.data
		console.log(sheng.value);
	};
	getSheng()
	const getClass = async () => {
		let res = await getClassApi();
		classList.value = res.data
	};
	getClass()
	const getShi = async (id) => {
		uni.showLoading({});
		let res = await getShiApi({
			pid: id,
		});
		shi.value = res.data
		console.log(shi.value);
		uni.hideLoading();
	};
	const platform = uni.getStorageSync("platform");
	const props = defineProps({});
	const sheng = ref([]);
	const shi = ref([]);
	const classList = ref([]);
	onShow(() => {
		let tokenInfo = uni.getStorageSync("USER_TOKEN_INFOS");
		if (tokenInfo) {
			uni.switchTab({
				url: "/pages/index/index",
			});
		}
	});
	onLoad((e) => {
		if (e.type) {
			query.value.event = "resetpwd";
		} else {
			query.value.event = "register";
		}
	});
	const validatePhone = (phone) => {
		const phonePattern = /^[1][3-9][0-9]{9}$/;
		return phonePattern.test(phone);
	};

	const messageList = ref({
		mobile: false,
		password: false,
		code: false,
	});

	const query = ref({
		mobile: "",
		password: "",
		confirm_password: "",
		code: "",
		check: false,
	});

	const countdown = ref(0);
	let timer = null;

	const getCode = async () => {
		if (countdown.value > 0) return;
		if (!validatePhone(query.value.mobile)) {
			messageList.value.mobile = true;
			return;
		} else {
			messageList.value.mobile = false;
		}
		let res = await sendCodeApi(query.value); // sendCodeApi should be defined
		console.log(res);
		uni.showToast({
			title: res.msg,
			icon: "none",
		});
		if (res.code === 1) {
			countdown.value = 59;
			timer = setInterval(() => {
				countdown.value -= 1;
				if (countdown.value <= 0) {
					clearInterval(timer);
					timer = null;
				}
			}, 1000);
		}
	};
	const biyans = ref(false);
	const submit = async () => {
		if (!validatePhone(query.value.mobile)) {
			messageList.value.mobile = true;
			return;
		} else {
			messageList.value.mobile = false;
		}
		if (query.value.code.length < 4) {
			messageList.value.code = true;
			return;
		} else {
			messageList.value.code = false;
		}

		if (query.value.password.length < 6) {
			messageList.value.password = true;
			return;
		} else {
			messageList.value.password = false;
		}

		if (query.value.password !== query.value.confirm_password) {
			uni.showToast({
				title: "两次密码输入不一致",
				icon: "none",
			});
			return;
		}
		if (!query.value.institution_code.length || query.value.institution_code.length < 4) {
			messageList.value.institution_code = true;
			return;
		} else {
			messageList.value.institution_code = false;
		}
		if (!query.value.nickname) {
			messageList.value.nickname = true;
			return;
		} else {
			messageList.value.nickname = false;
		}
		if (!query.value.grade_id) {
			messageList.value.grade_id = true;
			return;
		} else {
			messageList.value.grade_id = false;
		}
		if (!query.value.province_id) {
			messageList.value.province_id = true;
			return;
		} else {
			messageList.value.province_id = false;
		}
		if (!query.value.city_id) {
			messageList.value.city_id = true;
			return;
		} else {
			messageList.value.city_id = false;
		}
		if (!query.value.check) {
			uni.showToast({
				title: "请阅读并同意智校伴学服务协议和隐私政策",
				icon: "none",
			});
			return;
		}
		let res;
		if (query.value.event == "register") {
			res = await registerApi(query.value); // registerApi should be defined
		} else {
			let par = {
				captcha: query.value.code,
				mobile: query.value.mobile,
				newpassword: query.value.password,
				confirm_password: query.value.confirm_password,
			};
			res = await changePasswordApi(par); // registerApi should be defined
		}
		uni.showToast({
			title: res.msg,
			icon: "none",
		});
		if (res.code === 1) {
			if (res.msg != "重置密码成功") {
				uni.setStorageSync("USER_TOKEN_INFOS", res.data.userinfo);
				uni.reLaunch({
					url: "/pages/index/index",
				});
			} else {
				setTimeout(() => {
					uni.navigateBack();
				}, 500);
			}
		} else {
			uni.showToast({
				title: res.msg,
				icon: "none",
			});
		}
	};

	const showXieYi = (index) => {
		uni.navigateTo({
			url: `/pages/yonghu/index?type=${index}`,
		});
	};

	const biyan = ref(false);
	const goback = () => {
		uni.navigateBack();
	};
	const suoyin = ref(0)
	const bottomModel = ref(null)
	const bottoms = ref(null)
	const guanbio = (e) => {
		query.value.city_id = e
	}
	const returnClassList = () => {
		const item = classList.value.find(item => item.id == query.value.grade_id)
		return item && item.name || '请选择所在年级'
	}
	const returnSheng = () => {
		const item = sheng.value.find(item => item.id == query.value.province_id)
		return item && item.name || '省'
	}
	const returnShi = () => {
		const item = shi.value.find(item => item.id == query.value.city_id)
		return item && item.name || '市'
	}
	const onnodeclick = (value) => {
		if (suoyin.value == 0) {
			suoyin.value = 1
			query.value.province_id = value
			getShi(value);
		} else {
			query.value.city_id = value
			bottomModel.value.close()
		}
	};
	const onnodeclicks = (value) => {
		query.value.grade_id = value
		bottoms.value.close()
	};
</script>

<template>
	<view class="wrap uni-col">
		<view class="header-wrap uni-row" :style="{
        paddingTop: platform.dingbu + 'rpx',
        height: platform.dingbu + 96 + 'rpx',
      }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title">{{
        query.event == "resetpwd" ? "忘记密码" : "注册"
      }}</view>
			<image class="left" style="opacity: 0" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<scroll-view class="wai" scroll-y="true"
			:style="{ marginTop: platform.rpxs > 1.5 ? '290rpx' : '310rpx',  height: platform.gaodu - platform.dingbu - 96 -(platform.rpxs > 1.5 ? 290 : 310) + 'rpx', }">
			<view class="ipts-wrap" :style="{ paddingTop: platform.rpxs > 1.5 ? '78rpx' : '48rpx' }">
				<view class="ipts-item uni-row" :class="query.event=='register'?'active':''">
					<image src="/static/img/login/user.png" class="icon" />
					<input type="text" v-model.trim="query.mobile" placeholder="请输入手机号" />
				</view>
				<view class="message" :style="{ opacity: messageList.mobile ? '1' : '0' }">
					请输入正确格式手机号
				</view>

				<view class="ipts-item uni-row">
					<image src="/static/img/login/icon2.png" class="icon" />
					<input type="text" v-model.trim="query.code" placeholder="请输入验证码" />
					<view class="send-code" @click="getCode" :style="{ color: countdown ? '#CCCCCC' : '#333' }">
						{{ countdown > 0 ? `${countdown}s后重新发送` : "发送验证码" }}
					</view>
				</view>
				<view class="message" :style="{ opacity: messageList.code ? '1' : '0' }">
					{{
            query.code && query.code.length < 6
              ? "验证码不小于6位"
              : "请输入正确格式的验证码"
          }}
				</view>

				<view class="ipts-item uni-row">
					<image src="/static/img/login/lock.png" class="icon" />
					<input :type="biyan ? 'text' : 'password'" v-model.trim="query.password" placeholder="请输入您的密码" />
					<image @click="biyan = !biyan" :src="
              biyan
                ? '/static/img/login/zhengyan.png'
                : '/static/img/login/biyan.png'
            " class="yanj" />
				</view>

				<view class="dibu uni-row">
					<view class="message" :style="{ opacity: messageList.password ? '1' : '0' }">
						密码不小于6位
					</view>
				</view>

				<view class="ipts-item uni-row">
					<image src="/static/img/login/lock.png" class="icon" />
					<input :type="biyans ? 'text' : 'password'" v-model.trim="query.confirm_password"
						placeholder="请再次输入您的密码" />
					<image @click="biyans = !biyans" :src="
              biyans
                ? '/static/img/login/zhengyan.png'
                : '/static/img/login/biyan.png'
            " class="yanj" />
				</view>

				<view class="dibu uni-row">
					<view class="message" :style="{ opacity: messageList.password ? '1' : '0' }">
						密码不小于6位
					</view>
				</view>
				<view class="ipts-item uni-row" :class="query.event=='register'?'active':''">
					<image src="/static/img/login/user.png" class="icon" />
					<input type="text" v-model.trim="query.institution_code" placeholder="请输入您的机构代码" />
				</view>
				<view class="message" :style="{ opacity: messageList.institution_code ? '1' : '0' }">
					请输入您的机构代码
				</view>
				<view class="ipts-item uni-row" :class="query.event=='register'?'active':''">
					<image src="/static/img/login/jigou.png" class="icon" />
					<input type="text" v-model.trim="query.nickname" placeholder="请输入您的姓名" />
				</view>
				<view class="message" :style="{ opacity: messageList.nickname ? '1' : '0' }">
					请输入您的姓名
				</view>
				<view class="ipts-item uni-row" @click="bottoms.open('bottom')">
					<image src="/static/img/login/nianji.png" class="icon" />
					<view class="input" :class="query.grade_id?'active':'default'">
						{{returnClassList()}}
					</view>
				</view>
				<view class="message" :style="{ opacity: messageList.grade_id ? '1' : '0' }">
					请选择年级
				</view>
				<view class="ipts-item uni-row" @click="bottomModel.open('bottom')">
					<image src="/static/img/login/dingwei.png" class="icon" />
					<view class="input" :class="query.province_id?'active':'default'">
						{{returnSheng()}} / {{returnShi()}}
					</view>
				</view>
				<view class="message" :style="{ opacity: messageList.province_id ? '1' : '0' }">
					请选择所在地区
				</view>
			</view>
			<view class="btns" :style="{ marginTop: platform.rpxs > 1.5 ? '200rpx' : '60rpx' }" @click="submit" :class="{
          active: validatePhone(query.mobile) && query.password && query.check,
        }">
				注册
			</view>

			<view :style="{ marginTop: platform.rpxs > 1.5 ? '50rpx' : '40rpx' }" class="info uni-row">
				<image v-show="!query.check" @click="query.check = !query.check" src="/static/img/login/yuan.png"
					mode="widthFix" class="check" />
				<image v-show="query.check" @click="query.check = !query.check" src="/static/img/login/select-yuan.png"
					mode="widthFix" class="check" />
				我已阅读并同意
				<text class="cr" @click="showXieYi(1)">《智校伴学服务协议》</text> 和
				<text class="cr" @click="showXieYi(2)">《隐私政策》</text>
			</view>
			<view style="height: 20rpx;">

			</view>
		</scroll-view>
	</view>
	<uni-popup ref="bottomModel">
		<view class="jilian">
			<view class="title">
				请选择所在地区
			</view>
			<view class="wraps">
				<view class="lists uni-row">
					<view class="sheng" @click="suoyin=0" :class="suoyin==0?'active':''">
						{{returnSheng()}}
					</view>
					<view class="shi" @click="suoyin=1" :class="suoyin==1?'active':''">
						{{returnShi()}}
					</view>
				</view>
				<view class="uni-row">
					<scroll-view scroll-y="true" class="gundongde">
						<view @click="onnodeclick(item.id)" class="item" v-for="(item,index) in suoyin==1?shi:sheng"
							:key="index"
							:class="(suoyin==0&&item.id==query.province_id) ||(suoyin==1&&item.id==query.city_id)?'active':''">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</uni-popup>
	<uni-popup ref="bottoms">
		<view class="jilian">
			<view class="title">
				请选择年级
			</view>
			<view class="wraps">
				<view class="lists uni-row">
					<view class="sheng active">
						{{returnClassList()}}
					</view>
				</view>
				<view class="uni-row">
					<scroll-view scroll-y="true" class="gundongde">
						<view @click="onnodeclicks(item.id)" class="item" v-for="(item,index) in classList" :key="index"
							:class="query.grade_id==item.id?'active':''">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<style scoped lang="less">
	.wrap {
		background: url("/static/img/login/bg.png");
		background-size: 100% 100%;
		// height: 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.banner {
			// padding-top: 88rpx;
			height: 598rpx;

			overflow: hidden;
			margin: 0 auto;

			.title {
				height: 96rpx;
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.box {
				position: relative;
				// padding-left: 70rpx;
				// padding-right: 20rpx;
				margin: 0 auto;

				.hello,
				.nihao {
					font-size: 60rpx;
					font-weight: bold;
				}

				.text {
					position: absolute;
					z-index: 3;
					// top: 110rpx;
				}

				.cen {
					justify-content: space-between;

					.xiaohai {
						// width: 360rpx;
					}
				}
			}
		}

		.wai {
			position: relative;
			z-index: 3;
			border-radius: 32rpx 32rpx 0 0;
			background-color: #fff;

			.select-wraps {
				justify-content: space-around;
				padding: 0 50rpx;

				.title {
					position: relative;
					font-size: 32rpx;
					color: #333333;

					&.active {
						&::after {
							position: absolute;
							display: block;
							content: "";
							left: 50%;
							bottom: -14rpx;
							transform: translate(-50%, 0);
							width: 140rpx;
							height: 4rpx;
							background-color: #9561f3;
						}
					}
				}
			}

			.ipts-wrap {
				padding: 0 70rpx 0;

				.ipts-item {
					position: relative;
					height: 88rpx;
					background: #f8f8f8;
					border-radius: 46rpx;
					padding: 0 28rpx;

					.icon {
						width: 48rpx;
						height: 48rpx;
						flex-shrink: 0;
						margin-right: 20rpx;
					}

					.send-code {
						width: 300rpx;
						text-align: right;
						font-size: 28rpx;
						color: #333;
					}

					.yanj {
						position: absolute;
						right: 28rpx;
						top: 50%;
						transform: translate(0, -50%);
						width: 32rpx;
						height: 32rpx;
					}
				}

				input {
					color: #333;
					font-size: 28rpx;

					&::placeholder {
						color: #666;
					}
				}

				.input {
					font-size: 28rpx;

					&.active {
						color: #333;
					}

					&.default {
						color: #666;
					}
				}

				.message {
					line-height: 40rpx;
					font-size: 28rpx;
					height: 40rpx;
					color: #f56c6c;
					margin-left: 28rpx;
				}

				.dibu {
					padding-right: 28rpx;
					justify-content: space-between;
					font-size: 26rpx;
					color: #000000;

					.item {
						margin-left: 48rpx;
					}
				}
			}

			.btns {
				margin: 0 70rpx 0;
				height: 88rpx;
				line-height: 88rpx;
				background: #d9d9d9;
				border-radius: 44rpx;
				font-size: 32rpx;
				text-align: center;
				color: #fff;

				&.active {
					background-color: #9561f3;
				}
			}

			.info {
				margin: 0 50rpx 0;
				justify-content: center;
				color: #b3b3b3;
				padding-left: 6rpx;

				.yuan {
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					border: 2rpx solid #cccccc;
					margin-right: 10rpx;
				}

				.check {
					width: 24rpx;
					margin-right: 10rpx;
				}

				font-size: 24rpx;

				.cr {
					color: #9561f3;
				}
			}
		}
	}

	.jilian {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;

		.title {
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			padding: 20rpx 0;
		}

		.wraps {
			.lists {

				.sheng,
				.shi {
					padding: 10rpx 30rpx;
					margin: 0 30rpx;
					font-size: 28rpx;
					font-weight: 500;
					border-bottom: 2rpx solid transparent;

					&.active {
						border-color: #007aff;
					}
				}

				.sheng {
					margin-right: 20rpx;
				}
			}

			.gundongde {
				padding: 10rpx 60rpx;
				height: 700rpx;

				.item {
					padding: 20rpx 0;
					font-size: 26rpx;
					font-weight: 400;

					&.active {
						font-weight: 600;
					}
				}
			}
		}
	}
</style>